<template>
  <div class="login">
    <div class="login_box">
      <div class="loginBor">
        <img class="login-title" src="../../static/image/login_title.png" />
        <div class="title">
          <img src="../../static/image/loginLogo.png" />
        </div>
        <div class="login_form">
          <div class="item">
            <img class="slot" src="static/image/account.png" />
            <input placeholder="用户账号" v-model="loginInfo.phone" @keyup.enter="submit('loginfrm')" />
          </div>
          <div class="item">
            <img class="slot" src="static/image/password.png" />
            <input
              type="password"
              v-model="loginInfo.password"
              placeholder="登录密码"
              @keyup.enter="submit('loginfrm')"
            />
          </div>
          <div class="item">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <el-button
            class="submit"
            @keydown.prevent="handleKeyDown"
            @click.prevent="submit('loginfrm')"
            :loading="loading"
          >登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Login } from "@/service/Api.js";
import Cookies from "js-cookie";
import md5 from "js-md5";

export default {
  data() {
    return {
      loginInfo: {
        phone: "",
        password: ""
      },
      loading: false,
      checked: false
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    handleKeyDown() {
      console.log(1);
    },
    forget() {
      this.$message.error("请联系后台管理员~");
    },
    submit(formName) {
      if (this.loginInfo.phone == "") {
        this.$message.error("请输入用户账号！");
        return;
      }
      if (this.loginInfo.password == "") {
        this.$message.error("请输入登录密码！");
        return;
      }

      //判断记住密码是否选中 选中则保存至cookie
      const self = this;
      if (self.checked == true) {
        self.setCookie(self.loginInfo.phone, self.loginInfo.password, 7);
      } else {
        console.log("清空cookie");
        self.clearCookie();
      }

      this.loginInfo.password = md5(this.loginInfo.password);
      this.loading = true;
      Login(this.loginInfo).then(
        result => {
          console.log(result);

          this.loading = false;
          if (result.code == 0) {
            sessionStorage.setItem("token", result.data.token);
            sessionStorage.setItem("userInfo", JSON.stringify(result.data));
            sessionStorage.setItem("fid", JSON.stringify(result.data.fid));
            this.$router.push({
              name: "workbench"
            });
          } else {
            this.$message.error(result.message);
            this.loginInfo.password = "";
          }
        },
        err => {
          this.$message.error("服务器错误~");
          this.loading = false;
        }
      );
    },

    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数

      //拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },

    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; ");
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("=");
          //判断查找相应的值
          if (arr2[0] == "userName") {
            this.loginInfo.phone = arr2[1];
          } else if (arr2[0] == "password") {
            this.loginInfo.password = arr2[1];
          }
        }
        this.checked = true;
      }
    },

    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1);
    }
  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  text-align: center;
  margin: auto;
  background: url("../../static/image/loginBg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.login_box {
  width: 600px;
  height: 450px;
  background: #1c9f7e;
  border-radius: 6px;
  margin: auto;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginBor {
  width: 560px;
  height: 410px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
}
.title {
  height: 62px;
  padding: 0 0 25px;
  margin-top: -27px;
}
.login_form {
  padding: 30px 80px 59px 80px;
  width: 100%;
  box-sizing: border-box;
}
.slot {
  margin: 0 18px 0 17px;
}
.item {
  /* background: rgba(255,255,255,1); */
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  height: 48px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.item:nth-child(3) {
  border: none;
  height: 26px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.item input {
  border: 0 !important;
  height: 38px;
  width: 84%;
  outline: none;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.submit {
  width: 100%;
  background: #34bc8b;
  border-radius: 5px;
  font-size: 14px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  border: none;
  height: 48px;
}
.submit:hover {
  background-color: #2bad7e;
}

.login-title {
  position: relative;
  top: -100px;
  left: -23px;
}
</style>
